<!--
  Generated template for the PlantDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar no-border>
    <ion-title>目的物种详情</ion-title>
    <ion-buttons end *ngIf="state==1">
      <button ion-button color="white" (click)="done()">完成</button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label item-start>副样方数</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入副样方(样圆)数"  [(ngModel)]="detailInfo.coSampleNum"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>目的物种副样方数</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="出现目的物种的副样方(样园)数"  [(ngModel)]="detailInfo.targetCoSampleNum"></ion-input>
    </ion-item>
    <p style="margin-left:10px;color:gray">目的物种生活型</p>
    <div padding-left class="checkMark" style="width:100%;">
      <div class="col" float-left text-center>
        <div style="overflow:auto;margin:0 auto;display: inline-block;">
          <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[0].checked" ></ion-checkbox>
          <p float-left>{{detailInfo.lifeForm[0].name}}</p>
        </div>
      </div>
      <div class="col" float-left text-center>
        <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
          <ion-checkbox disabled="{{state=='1'?'false':'true'}}" disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[1].checked"></ion-checkbox>
          <p float-left>{{detailInfo.lifeForm[1].name}}</p>
        </div>
      </div>
      <div class="col" float-left text-center>
        <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
          <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[2].checked"></ion-checkbox>
          <p float-left>{{detailInfo.lifeForm[2].name}}</p>
        </div>
      </div>
      <div class="col" float-left text-center>
          <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
            <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[3].checked"></ion-checkbox>
            <p float-left>{{detailInfo.lifeForm[3].name}}</p>
          </div>
        </div>
        <div class="col" float-left text-center>
            <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
              <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[4].checked"></ion-checkbox>
              <p float-left>{{detailInfo.lifeForm[4].name}}</p>
            </div>
          </div>
          <div padding-left class="ty-line1" float-left></div>
          <div class="col" float-left text-center>
              <div style="overflow:auto;margin:0 auto;display: inline-block;">
                <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[5].checked"></ion-checkbox>
                <p float-left>{{detailInfo.lifeForm[5].name}}</p>
              </div>
            </div>
            <div class="col" float-left text-center>
              <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
                <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[6].checked"></ion-checkbox>
                <p float-left>{{detailInfo.lifeForm[6].name}}</p>
              </div>
            </div>
            <div class="col" float-left text-center>
              <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
                <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[7].checked"></ion-checkbox>
                <p float-left>{{detailInfo.lifeForm[7].name}}</p>
              </div>
            </div>
            <div class="col" float-left text-center>
                <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
                  <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[8].checked"></ion-checkbox>
                  <p float-left>{{detailInfo.lifeForm[8].name}}</p>
                </div>
              </div>
              <div class="col" float-left text-center>
                  <div style="overflow:auto;margin:0 auto;display: inline-block;*display:inline; *zoom:1;">
                    <ion-checkbox disabled="{{state=='1'?'false':'true'}}" class="checkbox-md checkbox_normal" color="primary" float-left [(ngModel)]="detailInfo.lifeForm[9].checked"></ion-checkbox>
                    <p float-left>{{detailInfo.lifeForm[9].name}}</p>
                  </div>
                </div>
    </div>
    <div class="ty-line1"></div>
    <ion-item>
      <ion-label item-start>幼树株数</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入幼树株数"  [(ngModel)]="detailInfo.saplingNum"></ion-input>
    </ion-item>
    <ion-item no-lines>
      <ion-label item-start>幼苗株数</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入幼苗株数"  [(ngModel)]="detailInfo.seedlingNum"></ion-input>
    </ion-item>
    <ion-item no-lines style="margin-top:20px;" *ngIf="detailInfo.pluntList.length > 0">
      <ion-icon item-start name="leaf" ios="ios-leaf-outline" md="ios-leaf-outline" color="primary"></ion-icon>
      <ion-label item-start>植株详情</ion-label>
    </ion-item>
    <div class="ty-line1"></div>

    <ion-item class="contact" *ngFor="let item of detailInfo.pluntList" no-padding no-margin>
      <div padding-left style="width:100%" item-content>
        <div class="row">
          <h3>序号</h3>
          <p >{{item.index}}</p>
        </div>
        <div class="ty-line1"></div>
        <div class="row">
          <h3>高度(M)</h3>
          <p>{{item.height}}</p>
        </div>
        <div class="ty-line1"></div>
        <div class="row">
          <h3>胸/地径(CM)</h3>
          <p>{{item.width}}</p>
        </div>
        <div class="ty-line1"></div>
        <div class="row">
          <h3>冠幅(M)</h3>
          <p>{{item.crownWidth}}</p>
        </div>
        <div class="ty-line1"></div>
        <div class="row">
          <h3>健康状况</h3>
          <p>{{item.health}}</p>
        </div>
      </div>
    </ion-item>
    <div style="width:100%;background:white;margin-top:1px;" *ngIf="state==='1'" >
      <button style="width:100%;height:44px" ion-button clear color="primary" (click)="addPlant()" icon-start>
        <ion-icon name="add" ios="ios-add-outline" md="ios-add-outline"></ion-icon>
        添加植株
      </button>
    </div>
  </ion-list>

</ion-content>